import React, { useState } from "react";
import instance from "../../utils/https";
import { Toast } from "react-vant";

// 定义组件 Props 类型
interface LeaveMessageProps {
  cid: string;
  onGetmassage: () => void; // onGetmassage 是一个无返回值的函数
}

const LeaveMessage: React.FC<LeaveMessageProps> = ({ cid, onGetmassage }) => {
  const [message, setMessage] = useState("");
  const [showModal, setShowModal] = useState(false);

  const handleOpenModal = () => {
    setShowModal(true);
  };

  const handleCloseModal = () => {
    setShowModal(false);
    setMessage(""); // 清空留言内容
  };
  const user_id = localStorage.getItem("_id");
  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const res: { msg: string } = await instance.post(
      "https://zcgjcy.com/api/detail/addComment",
      {
        content: message,
        uid: user_id,
        cid: cid,
      }
    );
    if (res.msg === "添加成功") {
      Toast.success("留言成功,审核通过后才会显示哦~");
      onGetmassage(); // 调用传入的回调函数
    }
    handleCloseModal(); // 提交成功后关闭弹出框
  };

  return (
    <div>
      <div onClick={handleOpenModal}>给他留言</div>
      {showModal && (
        <div
          className="modal"
          style={{
            backgroundColor: "rgba(0, 0, 0, 0.5)",
            position: "fixed",
            top: "0",
            left: "0",
            right: "0",
            bottom: "0",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            zIndex: "1000",
          }}
        >
          <div
            className="modal-content"
            style={{
              backgroundColor: "#332f38",
              padding: "20px",
              borderRadius: "8px",
              width: "400px",
            }}
          >
            <h2>写留言</h2>
            <form onSubmit={handleSubmit}>
              <textarea
                style={{
                  letterSpacing: "2px",
                  lineHeight: "30px",
                  width: "370px",
                  height: "160px",
                  paddingLeft: "2ch",
                  paddingRight:"2ch"
                }}
                value={message}
                onChange={(e) => setMessage(e.target.value)}
                placeholder="说点什么吧~"
                rows={4}
                cols={50}
                required
              />
              <br />
              <button
                type="submit"
                style={{
                  backgroundColor: "#fdcb77",
                  color: "rgb(191, 116, 43)",
                  padding: "10px",
                  border: "none",
                  borderRadius: "4px",
                  cursor: "pointer",
                  width: "45%",
                }}
              >
                提交
              </button>
              <button
                onClick={handleCloseModal}
                style={{
                  backgroundColor: "gray",
                  color: "white",
                  padding: "10px",
                  border: "none",
                  borderRadius: "4px",
                  cursor: "pointer",
                  marginLeft: "10px",
                  width: "45%",
                }}
              >
                取消
              </button>
            </form>
          </div>
        </div>
      )}
    </div>
  );
};

export default LeaveMessage;
